import React, { Component } from 'react'
import './index.scss'
import { connect } from 'react-redux'
import * as ballActions from '../../actions/ball'
import * as vmapActions from '../../actions/vmap'
import * as mapActions from '../../actions/map'
import { bindActionCreators } from 'redux'
import randomNum from '../../util/random'
import createMap from '../../util/createMap'
class Ball extends Component {
    ballImg = {
        'ball1': require('../../assets/imgs/ball.png'),
        'ball2': require('../../assets/imgs/ball-fire.png')
    }
    state = {
        type: 1,
        angle: randomNum(0,1) ?  -randomNum(30,60) :  -randomNum(120,150),
        x: 500,
        y: 500,
        speed: 8,
        size: {
            width: 24,
            height: 24,
        },
        // 球是否在板子上
        isMove: false,
    }
    sizeTimer = null
    timer = null
    typeTimer = null
    fps = 120
    move () {
        const { size } = this.state
        const currentBallX = this.props.racket.racketX - size.width / 2
        const currentBallY = this.props.wrapHeight - 16 - size.height
        this.setState({
            x: currentBallX,
            y: currentBallY
        },() => {
            this.run()
            console.log(this.state.x, this.state.y)
        })
    }
    run () {
        const { lostLife } = this.props
        const map = this.props.map.map
        this.timer = setInterval(() => {
            // console.log(this.state.speed * Math.sin(this.state.angle * Math.PI / 180))
            let x = this.state.x + this.state.speed * Math.cos(this.state.angle * Math.PI / 180)
            let y = this.state.y + this.state.speed * Math.sin(this.state.angle * Math.PI / 180)
            // 直接获取props中的 两个回调有冲突
            // const racketX = this.props.mousePosition
            // console.log(racketX)
            const { wrapHeight } = this.props
            const { racketX } = this.props.racket
            const ballHeight = this.state.size.height
            const ballWidth = this.state.size.width
            const { setBallPosition } = this.props.ballActions
            // 碰到两边
            if (x <= 0 || x >= this.props.wrapWidth - this.state.size.width - 2) {
                this.LeftRightCollision(x,y)
                return
            }
            // 碰到顶端
            else if (y <= 0) {
                this.upDownCollision(x,y)
                return
            } 
            // 碰到底端
            else if ( y >= wrapHeight - 16 - ballHeight) {
                // console.log(x,racketX)
                if (x + ballWidth >= racketX - 60 && x <= racketX + 60) {
                    this.upDownCollision(x,y)
                    return
                }
                // 没有接到
                else {
                    clearInterval(this.timer)
                    lostLife()
                    this.setState({
                        angle: randomNum(0,1) ?  -randomNum(30,60) :  -randomNum(120,150),
                        isMove: false
                    },() => {
                        this.setState({
                            x,
                            y
                        })
                    })
                    return
                }
            }
            // 碰到砖块
            map.some((position,index) => {
                // if (!gate) return false
                // console.log('aaaaa')
                const blockX = position[0]
                const blockY = position[1]
                const blockRow = position[2]
                const blockCol = position[3]
                const blockType = position[4]
                const ballHalfWidth = this.state.size.width / 2
                const ballHeight = this.state.size.height
                const { clearBlock } = this.props.vmapActions
                // 碰到板上下
                if (x + ballHalfWidth >= blockX && x + ballHalfWidth <= blockX + 74) {
                    if (y <= blockY + 34 && y + 34 >= blockY) {
                        map.splice(index, 1)
                        if(this.reset(map)) return true
                       this.upDownCollision(x,y,1)
                        clearBlock(blockRow,blockCol)
                        this.reward(blockType)
                        return true
                    }
                }
                else if (y + ballHeight >= blockY && y <= blockY + ballHeight) {
                    if (x + ballHalfWidth * 2 >= blockX && x <= blockX + 34) {
                        map.splice(index, 1)
                        if(this.reset(map)) return true
                        clearBlock(blockRow,blockCol)
                        this.LeftRightCollision(x,y,1)
                        this.reward(blockType)
                        return true
                    }
                }
            })
            this.setState({
                x,
                y
            })
            setBallPosition(x,y)
        },1000 / this.fps)
    }
    upDownCollision (x,y,flag) {
        let angle = -this.state.angle
        if(flag) {
            if (this.state.type === 2) {
                angle = this.state.angle
            }
        }
        this.setState({
            angle: angle,
            x,
            y
        })
    }
    LeftRightCollision (x,y,flag) {
        let angle = 180 - this.state.angle
        if(flag) {
            if (this.state.type === 2) {
                angle = this.state.angle
            }
        }
        this.setState({
            angle,
            x,
            y
        })
    }
    // 特殊砖块
    reward (type) {
        if (type <= 5) return
        switch (type) {
            case 6:
             if(this.state.type === 2) return;
             this.setState({
                 type: 2
             })
             this.typeTimer = setTimeout(() => {
                this.setState({
                    type: 1
                })
             },4500)
            break;
            case 7 :
                if (this.state.size.width === 36) return;
                this.setState({
                    size: {
                        width: 36,
                        height: 36
                    } 
                })
                    this.sizeTimer = setTimeout(() => {
                        this.setState({
                            size: {
                                width: 24,
                                height: 24
                            } 
                        })
                },10000)
                break;
            case 8: 
            this.props.addLife()
            break;
            case 9:
                this.setState({
                    speed: this.state.speed + 1
                })
            break;
            default:
                break
        }
    }
    componentDidMount() {
        const gameContainer = document.getElementById('game-container')
        // 绑定点击发球事件
        gameContainer.addEventListener('click',() => {
            // 防止多次触发move事件
            if (this.state.isMove) return
            this.setState({
                isMove: true
            },() => {
                this.move()
            })
        })
    }
    resetBall() {
        this.setState({
            type: 1,
            angle: randomNum(0,1) ?  -randomNum(30,60) :  -randomNum(120,150),
            speed: 8,
            size: {
                width: 24,
                height: 24,
            },
            x: 0,
            y: 0,
            isMove: false
        })
    }
    reset(map) {
        if (map.length > 0) return false
        clearInterval(this.timer)
        const { nextRound } = this.props
        this.resetBall()
        this.props.mapActions.resetBlock()
        createMap.call(this)
        nextRound()
        console.log(this.props.map.map)
        return true
    }
    render() {
        const { racketX } = this.props.racket
        const { wrapHeight } = this.props
        const { type, size, x, y, isMove } = this.state
        const ballX = isMove ? x : racketX - size.width / 2
        const ballY = isMove ? y : wrapHeight - 16 - size.height
        console.log(wrapHeight)
        console.log(wrapHeight - 16 - size.height)
        return (
            <div className="ball-box" style={{
                width: size.width,
                height: size.height,
                top: ballY,
                left: ballX
            }}>
                <img src={this.ballImg[`ball${type}`]} alt="" />
            </div>
        )
    }
}


const mapState = (state) => {
    return {
        racket: state.racket,
        map: state.map,
    }
}
const mapAction = (dispatch) => {
    return {
        ballActions: bindActionCreators(ballActions,dispatch),
        vmapActions: bindActionCreators(vmapActions,dispatch),
        mapActions: bindActionCreators(mapActions,dispatch)
    }
}
export default connect(mapState,mapAction)(Ball)
